<template>
  <div class="max">
    <div class="hang1">
      <div class="hang1-lie1">
        <div class="hang1-lie1-hang1">
          <!-- 上右 -->
          <div　style="width: 100%;height:100%;">
            <div id="main1" style="width: 100%;height:100%;"></div>
          </div>
        </div>
        <div class="hang1-lie2-hang2">
          <!-- 中右 -->
          <div　style="width: 100%;height:100%;">
            <div id="main3" style="width: 100%;height:100%;"></div>
          </div>
        </div>
      </div>
      <div class="hang1-lie2">
        <div class="hang1-lie2-hang3">
          <!-- 上左 -->
            <div　style="width: 100%;height:100%;">
              <div id="main2" style="width: 100%;height:100%;"></div>
            </div>
        </div>
        <div class="hang1-lie1-hang4">
          <!-- 中左 -->
          <div　style="width: 100%;height:100%;">
            <div id="main4" style="width: 100%;height:100%;"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="hang2">
      <div class="hang2-lie1">
        <!-- 下左 -->
        <div class="hang2-lie1-1" ref="myLeftTop">
          <!-- 下左一 -->
          <div style="text-align: center;">
            <h3 class="myH3">客户邀约到店量倒数TOP3</h3>
            <el-table :data="cheliang" border size="mini" :height="biaoHeight" :header-cell-style="{background:'#eef1f6',color:'#606266'}" :row-style="{height:'44px'}" :cell-style="{padding:'0px'}"
              style="width: 100% ; font-size: 17px ;">
              <el-table-column prop="date" width="100%" label="排名" align="center">
              </el-table-column>
              <el-table-column prop="name" label="销售顾问" align="center">
              </el-table-column>
              <el-table-column prop="shouru" label="数量" align="center">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="hang2-lie1-2">
          <!-- 下左二 -->
          <div style="text-align: center;">
            <h3 class="myH3">客户A级数量倒数TOP3</h3>
            <el-table :data="yansheng" border size="mini" :height="biaoHeight" :header-cell-style="{background:'#eef1f6',color:'#606266'}" :row-style="{height:'44px'}" :cell-style="{padding:'0px'}"
              style="width: 100%  ;font-size: 17px ;">
              <el-table-column prop="date" width="100%" label="排名" align="center">
              </el-table-column>
              <el-table-column prop="name"  label="销售顾问" align="center">
              </el-table-column>
              <el-table-column prop="shouru" label="数量" align="center">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="hang2-lie2">
        <!-- 下中 -->
        <div class="hang2-lie2-1">
          <!-- 下中一 -->
          <div style="width: 100%;height:50%;text-align: center;">
            <h3 class="myH3">年度线索转化效率</h3>
            <el-table :data="xiansuo" border size="mini" :height="biaoHeightxi" :header-cell-style="{background:'#eef1f6',color:'#606266'}" :row-style="{height:'30px'}" :cell-style="{padding:'0px'}"
              style="width: 100%  ;font-size: 17px ;">
              <el-table-column prop="name" label="类型" align="center">
              </el-table-column>
              <el-table-column prop="value" label="数量" align="center">
              </el-table-column>
              <el-table-column prop="xiaolv" label="效率" align="center">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="hang2-lie2-2">
          <!-- 下中二 -->
            <div style="width: 100%;height:100%;">
              <div id="main" style="width: 100%;height:100%;"></div>
            </div>
        </div>
      </div>
      <div class="hang2-lie3">
        <!-- 下右 -->
        <div style="width: 100%;height:100%;">
          <div id="main5" style="width: 100%;height:100%;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  window.onresize = function(){
     location.reload()
  }
  export default {
    data() {
      return {
        biaoHeight:'',              //表高度
        biaoHeightxi:'',            //表高度

        shieryue:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],   //12月x轴

        tuyiy: []/* [88, 92, 63, 77, 94, 80, 72, 86, 22, 15, 66, 32] */,       //图一y轴数据

        tusan:[{product: '一月', '一次邀约':0, '二次以上': 0},
                {product: '二月', '一次邀约' : 0, '二次以上': 0},
                {product: '三月', '一次邀约': 0, '二次以上': 0},
                {product: '四月', '一次邀约': 0, '二次以上': 0},
                {product: '五月', '一次邀约': 0, '二次以上': 0},
                {product: '六月', '一次邀约': 0, '二次以上': 0},
                {product: '七月', '一次邀约': 0, '二次以上': 0},
                {product: '八月', '一次邀约': 0, '二次以上': 0},
                {product: '九月', '一次邀约': 0, '二次以上': 0},
                {product: '十月', '一次邀约': 0, '二次以上': 0},
                {product: '十一月', '一次邀约': 0, '二次以上': 0},
                {product: '十二月', '一次邀约': 0, '二次以上': 0},],                //图三数据


        tusix:[],                 //图四 x轴数据
        tusiy:[],                 //图四 y轴数据

        xianxia:[],                    //线下(12月)
        xianshang:[],                  //线上(12月)

        cheliang: [{        // 表一 TOP3（万元）
          date: '1',
          name: '',
          shouru: ''
        },{
          date: '2',
          name: '',
          shouru: ''
        },{
          date: '3',
          name: '',
          shouru: ''
        }] ,
        yansheng: [{        //表二 TOP3（万元）
          date: '1',
          name: '',
          shouru: ''
        },{
          date: '2',
          name: '',
          shouru: ''
        },{
          date: '3',
          name: '',
          shouru: ''
        }],

        xiansuo: [{
          date: '1',
          name: '',
          value: '',
          xiaolv:''
        }, {
          date: '2',
          name: '',
          value: '',
          xiaolv:''
        }, {
          date: '3',
          name: '',
          value: '',
          xiaolv:''
        }, {
          date: '3',
          name: '',
          value: '',
          xiaolv:''
        }],

        data8:[
                {product: '一月', 'H客户':0, 'A客户': 0, 'B客户': 0, 'C客户': 0},
                {product: '二月', 'H客户' : 0, 'A客户': 0, 'B客户': 0, 'C客户': 0},
                {product: '三月', 'H客户': 0, 'A客户': 0, 'B客户': 0, 'C客户': 0},
                {product: '四月', 'H客户': 0, 'A客户': 0, 'B客户': 0, 'C客户': 0},
                {product: '五月', 'H客户': 0, 'A客户': 0, 'B客户': 0, 'C客户': 0},
                {product: '六月', 'H客户': 0, 'A客户': 0, 'B客户': 0, 'C客户': 0},
                {product: '七月', 'H客户': 0, 'A客户': 0, 'B客户': 0, 'C客户': 0},
                {product: '八月', 'H客户': 0, 'A客户': 0, 'B客户': 0,'C客户': 0},
                {product: '九月', 'H客户': 0, 'A客户': 0, 'B客户': 0, 'C客户': 0},
                {product: '十月', 'H客户': 0, 'A客户': 0, 'B客户': 0, 'C客户': 0},
                {product: '十一月', 'H客户': 0, 'A客户': 0, 'B客户': 0, 'C客户': 0},
                {product: '十二月', 'H客户': 0, 'A客户': 0, 'B客户': 0, 'C客户': 0},
              ]
      }
    },
    methods: {
      myEcharts1() {      //图一
        //二手车部客户线索量
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('main1'));
        var xDataArr = this.shieryue //x轴数据
        var yDataArr = this.tuyiy //y轴数据
        // 指定图表的配置项和数据
        var option = {

          title: {
            top:'10',
            text: '二手车部客户线索量',
            left: 'center'
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            formatter:'{a}<br/>{b} : {c} '                      //提示框单位
          },
          toolbox: {          //工具栏
            show: true,
            feature: {
              dataView: {
                readOnly: true
              }, //readOnly只读模式
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '1%',
            containLabel: true
          },
          xAxis: [{
            type: "category",
            data: xDataArr,
            axisLabel: {
               interval:0,
               rotate:5
            },
            axisTick: {
              lineStyle: {
                width: 0
              }
            }
          }],
          yAxis: [{
            type: "value",
            axisLabel:{formatter:'{value}'}
          }],
          series: [{
            name: "厂家提车目标达成情况",
            type: "bar",
            barWidth: "50%",
            data: yDataArr
          }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },
      myEcharts2() {      //图二
        //二手车部客户级别  12个月H\A\B\C客户数量
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('main2'));

        // 指定图表的配置项和数据
        var option = {
          title: {
            top:'10',
            text: '二手车部客户级别 ',
            left: 'center'
          },
              legend: {
                left: "3%",
                top: "13%"
              },
             grid: {
                 left: '3%',
                 right: '4%',
                 bottom: '4%',
                 containLabel: true
             },
               tooltip: {
                 trigger: "axis",
                 axisPointer: {
                   type: "shadow"
                 }
               },
               dataset: {
                   dimensions: ['product', 'H客户', 'A客户','B客户','C客户'],
                   source: this.data8

               },
               toolbox: {
                   show: true,
                   feature: {
                       dataView: {readOnly: true},        //readOnly只读模式
                      // restore: {}, //刷新
                       saveAsImage: {}
                   }
               },
               xAxis: {type: 'category'},
               yAxis: {},
               // Declare several bar series, each will be mapped
               // to a column of dataset.source by default.
               series: [
                   {type: 'bar'},
                   {type: 'bar'},
                   {type: 'bar'},
                   {type: 'bar'},
               ],

        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },

    myEcharts3() {        //图三
         //二手车部邀约到店量 12个月邀约到店量
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('main3'));
        // 指定图表的配置项和数据
       var option = {
         title: {
           top:'10',
           text: '二手车部客户级别 ',
           left: 'center'
         },
             legend: {
               left: "3%",
               top: "13%"
             },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '4%',
                containLabel: true
            },
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow"
                }
              },
              dataset: {
                  dimensions: ['product', '一次邀约', '二次以上'],
                  source: this.tusan

              },
              toolbox: {
                  show: true,
                  feature: {
                      dataView: {readOnly: true},        //readOnly只读模式
                      magicType: {type: ['line', 'bar']},
                     // restore: {}, //刷新
                      saveAsImage: {}
                  }
              },
              xAxis: {type: 'category'},
              yAxis: {},
              // Declare several bar series, each will be mapped
              // to a column of dataset.source by default.
              series: [
                  {type: 'bar'},
                  {type: 'bar'},

              ],

       }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },

      myEcharts4() {      //图四
          //二手车部试乘试驾量
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('main4'));
          var xDataArr = this.shieryue //x轴数据
          var yDataArr = this.tusiy //y轴数据
          // 指定图表的配置项和数据
          var option = {
            title: {
              top:'10',
              text: '二手车部试乘试驾量',
              left: 'center'
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              },
              formatter:'{a}<br/>{b} : {c} '                      //提示框单位
            },
            toolbox: {          //工具栏
              show: true,
              feature: {
                dataView: {
                  readOnly: true
                }, //readOnly只读模式
                saveAsImage: {}
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '1%',
              containLabel: true
            },
            xAxis: [{
              type: "category",
              data: xDataArr,
              axisLabel: {
                 interval:0,
                 rotate:5
              },
              axisTick: {
                lineStyle: {
                  width: 0
                }
              }
            }],
            yAxis: [{
              type: "value",
              axisLabel:{formatter:'{value}'}
            }],
            series: [{
              name: "衍生业务收入",
              type: "bar",
              barWidth: "50%",
              data: yDataArr
            }]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        },

      myEcharts5() { //二手车部各岗位本年度收入对比（万元）5
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('main5'));
        // 指定图表的配置项和数据
        var option = {
          title: {
            top:'10',
            text: '二手车部各岗位本年度收入对比（万元）',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: "shadow"
            },
          },
          legend: {
            data: ['线上', '线下'],
            top: '10%'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            show: true,
            feature: {
              dataView: {
                readOnly: true
              }, //readOnly只读模式
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap:['50%','20%'],
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
              name: '线下',
              type: 'line',
              data: this.xianxia
            },
            {
              name: '线上',
              type: 'line',
              data: this.xianshang
            },
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },
      myEcharts(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
      	   title: {
      	          text: '年度收入明细（万元）',
      	          left: 'left'
      	      },
      	      tooltip: {
      	          trigger: 'item',
                  formatter: '{a} <br/>{b} : {c} ({d}%)'      //显示比例
      	      },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '1%',
                containLabel: true
              },
              toolbox: {          //工具栏
                show: true,
                feature: {
                  dataView: {
                    readOnly: true
                  }, //readOnly只读模式
                  saveAsImage: {}
                }
              },
              legend: {                      //图例组件
                    orient: 'vertical',
                    left: 'left',
                    bottom:'40'
                },
      	      series: [
      	          {
                      center:["60%","50%"],           //图表位置
      	              name: '明细',
      	              type: 'pie',
      	              radius: '60%',      //饼状图大小
      	              data:this.xiansuo,
      	              emphasis: {
      	                  itemStyle: {
      	                      shadowBlur: 10,
      	                      shadowOffsetX: 0,
      	                      shadowColor: 'rgba(0, 0, 0, 0.5)'
      	                  }
      	              }
      	          }
      	      ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        },
        //二手车部客户线索量
        XiaoSHouBuKeHuXianSuoLiang(){
          this.$ajax.post('ershouCheTuBiao/XiaoSHouBuKeHuXianSuoLiang',{}).then(res =>{
            var result = res.data
              this.tuyiy = result.data
            this.myEcharts1();
          })
        },
        //二手车部客户级别  12个月H\A\B\C客户数量
        ABCHLevel(){
          this.$ajax.post('ershouCheTuBiao/ABCHLevel',{}).then(res =>{
            var result = res.data
            for (var i = 0; i < this.data8.length; i++) {
              this.data8[i].H客户 = result.data[0][i]
              this.data8[i].A客户 = result.data[1][i]
              this.data8[i].B客户 = result.data[2][i]
              this.data8[i].C客户 = result.data[3][i]
            }

            this.myEcharts2();
          })
        },

        //二手车部邀约到店量 12个月邀约到店量
        XiaoSHouBuYaoYueLaiDianLiang(){
          this.$ajax.post('ershouCheTuBiao/XiaoSHouBuYaoYueLaiDianLiang',{}).then(res =>{
            var result = res.data
            for (var i = 0; i < this.tusan.length; i++) {
              this.tusan[i].一次邀约 = result.data[0][i]
              this.tusan[i].二次以上 = result.data[1][i]
            }
            this.myEcharts3();

          })
        },

        //二手车部试乘试驾量
        XiaoSHouBuShiCHengShiJiaLiang(){
           this.$ajax.post('ershouCheTuBiao/XiaoSHouBuShiCHengShiJiaLiang',{}).then(res =>{
             var result = res.data
             this.tusiy = result.data
             this.myEcharts4();
           })
        },

        //客户邀约到店量倒数TOP3
        KeHuYaoYueDaoDianLiangDaoShuPaiMing(){
          this.$ajax.post('ershouCheTuBiao/KeHuYaoYueDaoDianLiangDaoShuPaiMing',{}).then(res =>{
            var result = res.data
            for (var i = 0; i < this.cheliang.length; i++) {
              this.cheliang[i].name = result.data[i].sysuer.name
              this.cheliang[i].shouru = result.data[i].num1
            }
          })
        },

        //客户A级数量倒数TOP3
        KeHuAJiShuLiangDaoShuPaiMing(){
          this.$ajax.post('ershouCheTuBiao/KeHuAJiShuLiangDaoShuPaiMing',{}).then(res =>{
            var result = res.data
            for (var i = 0; i < this.yansheng.length; i++) {
              this.yansheng[i].name = result.data[i].sysuer.name
              this.yansheng[i].shouru = result.data[i].num1
            }
          })
        },
        //年度线索转化效率
        NianDuXianSuoZhuanHuanXiaolv(){
          this.$ajax.post('ershouCheTuBiao/NianDuXianSuoZhuanHuanXiaolv',{}).then(res =>{
            var result = res.data
            for (var i = 0; i < result.data.length; i++) {
              this.xiansuo[i].name = result.data[i].name
              this.xiansuo[i].value = result.data[i].bigNumber


            }
            this.myEcharts();
            console.log(result.data);
          })
        },

        //二手车部年线索来源一览
        XIaoShouBuNianXianSuoLaiYuan(){
          this.$ajax.post('ershouCheTuBiao/XIaoShouBuNianXianSuoLaiYuan',{}).then(res =>{
            var result = res.data
            this.xianshang = result.data[0]
            this.xianxia = result.data[1]
            this.myEcharts5();
          })
        }


    },
    mounted() {           //mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
      this.myEcharts1();
      this.myEcharts2();
      this.myEcharts3();
      this.myEcharts4();
      this.myEcharts5();
      this.myEcharts();
      this.biaoHeight= 'calc'+'('+this.$refs.myLeftTop.offsetHeight+'px '+'+'+' 3px '+'-'+' 1.7em'+')'    //计算表top3高度       myLeftTop表一div高度，高度相同，两个top表通用
      this.biaoHeightxi= 'calc'+'('+this.$refs.myLeftTop.offsetHeight+'px '+'+'+' -7px '+'-'+' 1.7em'+')'  //计算表明细高度
    },
    created() {         //created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
      this.XiaoSHouBuKeHuXianSuoLiang();                              //二手车部客户线索量
      this.ABCHLevel();                                               //二手车部客户级别  12个月H\A\B\C客户数量
      this.XiaoSHouBuYaoYueLaiDianLiang();                            //二手车部邀约到店量 12个月邀约到店量
      this.XiaoSHouBuShiCHengShiJiaLiang();                           //二手车部试乘试驾量
      this.KeHuYaoYueDaoDianLiangDaoShuPaiMing();                     //客户邀约到店量倒数TOP3
      this.KeHuAJiShuLiangDaoShuPaiMing();                            //客户A级数量倒数TOP3
      this.XIaoShouBuNianXianSuoLaiYuan();                            //二手车部年线索来源一览
      this.NianDuXianSuoZhuanHuanXiaolv();                            //年度线索转化效率
    }
  }
</script>

<style scoped>
 .max {
     /* 弹性上下布局 */
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .hang1 {
 /* 弹性左右布局 */
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
   /* 总布局第一行 */
    width: calc(100% - 3px );
    height: 50%;

  }

  .hang2 {
    margin-top: 18px;
    /* 弹性左右布局 */
       display: -webkit-flex;
       display: flex;
       -webkit-flex-direction: row;
       flex-direction: row;
    /* 总布局第二行 */
    width: calc(100% - 24px );
    height: 50%;

  }

  .hang1-lie1 {
    /* 总布局第一行右列 */
    width: 50%;
    height: 100%;

  }

  .hang1-lie2 {
    /* 总布局第一行左列 */
    width: 50%;
    height: 100%;
  }

  .hang2-lie1 {
    /* 弹性上下布局 */
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    /* 总布局第二行右列 */
    /* 下左 */
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    border: 3px solid #EBEEF5;
    width: 30%;
    height: calc(102.3% - 12px);
  }
  .hang2-lie1-1{
    /* 下左一 */
   width: 100%;
   height: 50%;
  }
  .hang2-lie1-2{
    /* 下左二 */
   width: 100%;
   height: 50%;
  }

  .hang2-lie2 {
    /* 弹性上下布局 */
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    /* 总布局第二行中列 */
    /* 下中 */
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    margin-left: 3px;
    border: 3px solid #EBEEF5;
    width: 28%;
    height: calc(102.3% - 12px);
  }
  .hang2-lie2-1{
      /* 下中一 */
      width: 100%;
      height: 50%;
    }
    .hang2-lie2-2{
        /* 下中二 */
        width: 100%;
        height: 50%;
    }

  .hang2-lie3 {
    /* 总布局第二行左列 */
    /* 下右 */
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    margin-left: 3px;
    border: 3px solid #EBEEF5;
    width: 43%;
    height: calc(102.3% - 12px);
  }

  .hang1-lie1-hang1 {
    /* 上左 */
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    border: 3px solid #EBEEF5;
    width: calc(100% - 6px);
    height: 50%;
  }
  .hang1-lie2-hang3 {
    /* 上右 */
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    margin-left: 3px;
    border: 3px solid #EBEEF5;
    width: calc(100% - 6px);
    height: 50%;
  }

  .hang1-lie2-hang2 {
    /* 中左 */
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    border: 3px solid #EBEEF5;
    width: calc(100% - 6px);
    height: 50%;
  }

  .hang1-lie1-hang4 {
    /* 中右 */
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    margin-top: 3px;
    margin-left: 3px;
    border: 3px solid #EBEEF5;
    width: calc(100% - 6px);
    height: 50%;
  }
  .myH3 {
    padding: 0;
    margin: 0;
  }
</style>